<template>
  <el-aside width="200px">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      default-active="1"
      router
    >
      <el-menu-item
        v-for="(m, idx) in asideInfo"
        :key="m.id"
        :index="(idx + 1).toString()"
        :route="m.path"
      >
        <i :class="iconObj[m.id]"></i>
        <span slot="title">{{ m.name }}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: "Aside",
  props: ["asideInfo"],
  data() {
    return {
      iconObj: {
        1: "el-icon-menu",
        2: "el-icon-menu",
        3: "el-icon-message",
      },
    };
  },
};
</script>

<style lang="less" scoped>
.el-aside {
  background-color: #545c64;
  .el-menu {
    border-right: none;
  }
}
</style>
